<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/dist.min.css">
</head>

<body>
    <div id="wrap">
        <header id="header">
            <div class="headTop">
                <div class="headTopMain">
                    <div class="left">
                        <h5>欢迎来到尚品汇！ 请</h5>
                        <p><a href="javascript:;">登录</a> <a href="javascript:;">注册</a></p>
                    </div>
                    <div class="right">
                        <nav><a href="##">我的订单</a> <a href="##">我的购物车</a> <a href="##">我的尚品汇</a> <a href="##">尚品汇会员</a>
                            <a href="##">企业采购</a> <a href="##">关注尚品汇</a> <a href="##">合作招商</a> <a href="##">商家后台</a>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="headBottom">
                <div class="headBottomMain">
                    <h1 class="logo"><a href="javascript:;"><img src="images/Logo.png" alt=""></a></h1>
                    <div class="search"><input type="text" placeholder="请输入搜索内容"> <input type="button" value="搜索"></div>
                </div>
            </div>
        </header>
        <div class="navWrap">
            <div class="navWrapMain">
                <nav><a href="javascript:;">全部商品分类</a> <a href="javascript:;">服装城</a> <a href="javascript:;">美妆馆</a> <a
                        href="javascript:;">尚品汇超市</a> <a href="javascript:;">全球购</a> <a href="javascript:;">闪购</a> <a
                        href="javascript:;">团购</a> <a href="javascript:;">有趣</a> <a href="javascript:;">秒杀</a></nav>
            </div>
        </div>
        <div id="content">
            <div class="conMain">
                <div class="navPath"></div>
                <div class="bigWrap">
                    <div class="left">
                        <div class="leftTop">
                            <div class="smallPic"><img src="images/s1.png" alt=""></div>
                        </div>
                        <div class="leftBttom"><a href="javascript:;" class="prev">&lt;</a>
                            <div class="picsWrap">
                                <ul></ul>
                            </div><a href="javascript:;" class="next">&gt;</a>
                        </div>
                    </div>
                    <div class="right">
                        <div class="rightTop"></div>
                        <div class="rightBottom">
                            <div class="choosed"></div>
                            <div class="chooseWrap"></div>
                            <div class="addcart">
                                <div class="count"><input type="text"> <a href="javascript:;">+</a> <a
                                        href="javascript:;">-</a></div><button>加入购物车</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="goodsDetailWrap">
                    <aside class="leftAside">
                        <div class="asideTop">
                            <h4 class="active">相关分类</h4>
                            <h4>推荐品牌</h4>
                        </div>
                        <div class="asideCont">
                            <div class="active">
                                <ul class="goodsList">
                                    <li>手机</li>
                                    <li>手机壳</li>
                                    <li>内存卡</li>
                                    <li>iphone配件</li>
                                    <li>贴膜</li>
                                    <li>手机耳机</li>
                                    <li>移动电源</li>
                                    <li>平板电脑</li>
                                </ul>
                                <ul class="goodsList2">
                                    <li><img src="images/part01.png" alt=""> <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button"><a href="javascript:;">加入购物车</a></div>
                                    </li>
                                    <li><img src="images/part01.png" alt=""> <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button"><a href="javascript:;">加入购物车</a></div>
                                    </li>
                                    <li><img src="images/part01.png" alt=""> <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button"><a href="javascript:;">加入购物车</a></div>
                                    </li>
                                    <li><img src="images/part01.png" alt=""> <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button"><a href="javascript:;">加入购物车</a></div>
                                    </li>
                                </ul>
                            </div>
                            <div>推荐品牌内容</div>
                        </div>
                    </aside>
                    <div class="rightDetail">
                        <div class="chooseWrap">
                            <h4>选择搭配</h4>
                            <div class="listWrap">
                                <div class="left"><img src="images/l-m01.png" alt="">
                                    <p>¥5299</p><i>+</i>
                                </div>
                                <ul class="middle">
                                    <li><img src="images/dp01.png" alt=""> <span>Feless费勒斯VR</span>
                                        <div><input type="checkbox" value="50"> <span>50</span></div>
                                    </li>
                                    <li><img src="images/dp02.png" alt=""> <span>Feless费勒斯VR</span>
                                        <div><input type="checkbox" value="50"> <span>50</span></div>
                                    </li>
                                    <li><img src="images/dp03.png" alt=""> <span>Feless费勒斯VR</span>
                                        <div><input type="checkbox" value="50"> <span>50</span></div>
                                    </li>
                                    <li><img src="images/dp04.png" alt=""> <span>Feless费勒斯VR</span>
                                        <div><input type="checkbox" value="50"> <span>50</span></div>
                                    </li>
                                </ul>
                                <div class="right">
                                    <div>已购0件商品</div>
                                    <p>套餐价</p><i>¥5299</i>
                                    <div><button>加入购物车</button></div>
                                </div>
                            </div>
                        </div>
                        <div class="bottomDetail">
                            <ul class="tabBtns">
                                <li class="active"><a href="javascript:;">商品介绍</a></li>
                                <li><a href="javascript:;">规格包装</a></li>
                                <li><a href="javascript:;">售后与保障</a></li>
                                <li><a href="javascript:;">商品评价</a></li>
                                <li><a href="javascript:;">手机社区</a></li>
                            </ul>
                            <div class="tabConts">
                                <div class="active">
                                    <ul>
                                        <li>分辨率：1920*1080(FHD)</li>
                                        <li>后置摄像头：1200万像素</li>
                                        <li>前置摄像头：500万像素</li>
                                        <li>核 数：其他</li>
                                        <li>频 率：以官网信息为准</li>
                                        <li>品牌： Apple</li>
                                        <li>商品名称：APPLEiPhone 6s Plus</li>
                                        <li>商品编号：1861098</li>
                                        <li>商品产地：中国大陆</li>
                                        <li>商品毛重：0.51kg</li>
                                        <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                                        <li>系统：苹果（IOS）</li>
                                        <li>像素：1000-1600万品毛重：0.51kg</li>
                                        <li>机身内存：64GB</li>
                                    </ul><img src="images/intro01.png" alt=""> <img src="images/intro02.png" alt="">
                                    <img src="images/intro03.png" alt="">
                                </div>
                                <div>规格包装</div>
                                <div>售后与保障</div>
                                <div>商品评价</div>
                                <div>手机社区</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rightAside asideClose">
            <div class="btns btnClose"></div>
            <div class="content"></div>
            <ul class="navList">
                <li>
                    <p></p><i>尚品会员</i>
                </li>
                <li>
                    <p></p><i>尚品会员</i>
                </li>
                <li>
                    <p></p><i>尚品会员</i>
                </li>
                <li>
                    <p></p><i>尚品会员</i>
                </li>
                <li>
                    <p></p><i>尚品会员</i>
                </li>
                <li>
                    <p></p><i>尚品会员</i>
                </li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="./js/data.min.js"></script>
<script type="text/javascript">window.onload = function () {
        //定义一个变量：保存大图的下标
        var bigImgIndex = 0;

        //右边侧边栏
        rightAsideBind();
        function rightAsideBind() {
            //获取按钮
            var btn = document.querySelector('#wrap .rightAside .btns')

            //获取侧边栏
            var rightAside = document.querySelector('#wrap .rightAside')

            var flag = true; // flag 标记，旗帜
            btn.onclick = function () {

                if (flag) {
                    //默认关闭，应该打开
                    rightAside.className = 'rightAside asideOpen'
                    btn.className = 'btns btnOpen'

                } else {
                    //现在是打开，需要关闭
                    rightAside.className = 'rightAside asideClose'
                    btn.className = 'btns btnClose'
                }

                flag = !flag;
            }

        }

        //价格联动
        //第一个部分 （选择搭配部分）
        // 左边价格 + 中间选中的价格 = 右边的价格
        choosePrice();
        function choosePrice() {
            // 获取左边价格元素
            var leftNode = document.querySelector('#wrap #content .conMain .goodsDetailWrap .rightDetail .chooseWrap .listWrap .left p')
            //获取右边的价格元素
            var rightNode = document.querySelector('#wrap #content .conMain .goodsDetailWrap .rightDetail .chooseWrap .listWrap .right > i')

            //获取中间 input 元素
            var checkbox = document.querySelectorAll('#wrap #content .conMain .goodsDetailWrap .rightDetail .chooseWrap .listWrap .middle li input')

            //遍历
            for (var i = 0; i < checkbox.length; i++) {
                checkbox[i].onclick = function () {
                    //中间选中的价格
                    //字符串截取  slice()
                    var leftP = Number(leftNode.innerHTML.slice(1)); //5299

                    //是否选中的循环
                    for (var j = 0; j < checkbox.length; j++) {
                        // 多选框是否选中了,如果选中，需要累加，如果没选中，不管
                        if (checkbox[j].checked) {

                            //最终的价格
                            leftP = leftP + Number(checkbox[j].value);

                        }
                    }

                    rightNode.innerHTML = '¥' + leftP;

                }
            }
        }

        //右边详情tab切换
        rightRab();
        function rightRab() {
            //获取点击按钮的区域
            var tabBtns = document.querySelectorAll('#wrap #content .conMain .goodsDetailWrap .rightDetail .bottomDetail .tabBtns li')
            //获取内容切换的区域
            var tabConts = document.querySelectorAll('#wrap #content .conMain .goodsDetailWrap .rightDetail .bottomDetail .tabConts > div')

            tab(tabBtns, tabConts);
        }

        //左侧 tab 切换（选项卡切换）
        leftTab();
        function leftTab() {
            //获取点击按钮的区域
            var tabBtns = document.querySelectorAll('#wrap #content .conMain .goodsDetailWrap .leftAside .asideTop h4')
            //获取内容切换的区域
            var tabCont = document.querySelectorAll('#wrap #content .conMain .goodsDetailWrap .leftAside .asideCont > div')

            tab(tabBtns, tabCont);
        }

        //封装tab切换
        function tab(tabBtns, tabCont) {
            //遍历tabBtns
            for (var i = 0; i < tabBtns.length; i++) {
                tabBtns[i].index = i;
                tabBtns[i].onclick = function () {
                    //其他元素 移出 active
                    for (var j = 0; j < tabBtns.length; j++) {
                        tabBtns[j].className = '';
                        tabCont[j].className = '';
                    }
                    //点击的元素 添加active
                    this.className = 'active';
                    tabCont[this.index].className = 'active'
                }
            }
        }


        //放大镜右侧下半部数据动态渲染
        rightBottomData();
        function rightBottomData() {
            var chooseWrap = document.querySelector('#wrap #content .conMain .bigWrap .right .rightBottom .chooseWrap')

            //获取数据
            var crumbData = goodData.goodsDetail.crumbData;

            //遍历数组
            for (var i = 0; i < crumbData.length; i++) {
                //创建 dl
                var dlNode = document.createElement('dl');
                //创建 dt
                var dtNode = document.createElement('dt')
                dtNode.innerHTML = crumbData[i].title;
                dlNode.appendChild(dtNode);
                chooseWrap.appendChild(dlNode);

                for (var j = 0; j < crumbData[i].data.length; j++) {
                    //创建 dd
                    var ddNode = document.createElement('dd');
                    ddNode.innerHTML = crumbData[i].data[j].type;
                    //给dd添加标签属性，为了价格计算逻辑
                    ddNode.setAttribute('changePrice', crumbData[i].data[j].changePrice)
                    dlNode.appendChild(ddNode);

                }

            }

        }

        //点击dd的逻辑（1.排他  2.选择效果 3.点击删除逻辑 4.价格变化逻辑）

        //2.选择效果
        //2.1 创建一个数组，数组的长度与 dl长度一样，默认元素0    [0,0,0,0]
        /* var arr = new Array(dlNodes.length);
         //fill 填充
         arr.fill(0)*/
        //2.2 注意点：数组的下标 与 dl的下标 是 一一对应的
        //2.3 点击dd,根据点击dd,获取其父元素dl的下标，
        //    去找数组相对应的位置，把dd内容添加到数组中
        //2.4 遍历最终的数组，如果其位置有元素，创建新的元素，如果没有元素，则忽略掉
        //2.5 点击dd一开始，需要把 choosed 中的内容清空

        //3.点击删除逻辑
        //3.1 获取a元素，绑定点击事件
        //3.2 点击的a元素的父元素，需要删除
        //3.3 数组对应的位置，恢复成默认值0
        //3.4 dd第一个区域变成红色，其他的dd变成#666

        //4.价格变化逻辑
        //4.1 点击 dd ,获取一下变动的价格
        //    注意点：我们每次拿的价格都是点击的最后一次，根据数组知道最后一次点击的dd
        //    由于数组一开始存储的是 具体的文本元素 ['银色','128G','移动版','电信优惠版']
        //    没有我们需要的变化价格 changeprice
        //    所以，根据需求，把逻辑变动一下 ， 目标 [dd,dd,dd,dd]
        //4.2 获取上边原有的价格
        //4.3 最终的价格 = 上边原有的价格 + 变动的价格
        //4.4 价格变动的封装函数，什么时候价格变化 （点击dd,点击a），一调用即可


        clickDDbind();
        function clickDDbind() {
            var choosed = document.querySelector('#wrap #content .conMain .bigWrap .right .rightBottom .choosed')
            //2.1 创建一个数组，数组的长度与 dl长度一样，默认元素0    [0,0,0,0]
            var arr = [0, 0, 0, 0];

            //获取dl
            var dlNodes = document.querySelectorAll('#wrap #content .conMain .bigWrap .right .rightBottom .chooseWrap dl')

            //遍历 dlNodes
            for (var i = 0; i < dlNodes.length; i++) {
                (function (i) {
                    //获取dl相对应下的dd
                    var ddNodes = dlNodes[i].querySelectorAll('dd')
                    //遍历 ddNodes
                    for (var j = 0; j < ddNodes.length; j++) {
                        ddNodes[j].onclick = function () {
                            //2.5 点击dd一开始，需要把 choosed 中的内容清空
                            choosed.innerHTML = '';

                            // console.log(i);//4
                            //1.排他效果
                            //其他dd保持不动
                            for (var k = 0; k < ddNodes.length; k++) {
                                ddNodes[k].style.color = '#666'
                            }
                            //点击dd变色
                            this.style.color = 'red';

                            //2.3 点击dd,根据点击dd,获取其父元素dl的下标，
                            //    去找数组相对应的位置，把dd内容添加到数组中
                            //获取其父元素dl的下标 i
                            // arr[i] = this.innerHTML;
                            //4.1 改动数组
                            arr[i] = this;

                            //4.4 调用价格变化的逻辑
                            //我们每次拿的价格都是点击的最后一次，根据数组知道最后一次点击的dd
                            changePriceBind(arr); //[dd,dd,dd,dd]

                            //2.4 遍历最终的数组，如果其位置有元素，创建新的元素，如果没有元素，则忽略掉
                            arr.forEach(function (item, index) {
                                //item : 数组中的每一个元素
                                //index : 数组中的下标
                                //如果其位置有元素，创建新的元素
                                //['黑色','128G',0,'电信优惠版']
                                if (item) {
                                    //创建div
                                    var divNode = document.createElement('div');
                                    divNode.className = 'mark';
                                    //4.1 变动数组后的变化
                                    divNode.innerHTML = item.innerHTML;
                                    var aNode = document.createElement('a');
                                    //记录一下 a 的下标
                                    aNode.setAttribute('num', index)
                                    aNode.innerHTML = 'X';
                                    divNode.appendChild(aNode)
                                    choosed.appendChild(divNode)
                                }

                            })

                            //3.1 获取a元素，绑定点击事件
                            var aNodes = document.querySelectorAll('#wrap #content .conMain .bigWrap .right .rightBottom .choosed .mark a')
                            for (var n = 0; n < aNodes.length; n++) {
                                aNodes[n].onclick = function () {
                                    //3.2 点击的a元素的父元素，需要删除
                                    choosed.removeChild(this.parentNode);
                                    //3.3 数组对应的位置，恢复成默认值0
                                    //获取 点击 a 的下标
                                    var aIndex = this.getAttribute('num');
                                    arr[aIndex] = 0;
                                    //数组的下标 ，aIndex , dl的下标 是一致的
                                    //3.4 dd第一个区域变成红色，其他的dd变成#666
                                    //获取相对应dl中的dd
                                    var dds = dlNodes[aIndex].querySelectorAll('dd');
                                    for (var m = 0; m < dds.length; m++) {
                                        dds[m].style.color = '#666'
                                    }
                                    dds[0].style.color = 'red';

                                    //价格变化的函数
                                    changePriceBind(arr)

                                }
                            }




                        }

                    }
                })(i);


            }


        }

        //价格变化的封装函数
        //[dd,dd,0,dd]
        function changePriceBind(arr) {
            var pNode = document.querySelector('#wrap #content .conMain .bigWrap .right .rightTop .priceWrap .priceTop .price p')
            //4.2 获取上边原有的价格
            var price = goodData.goodsDetail.price; // 5299
            //4.3 最终的价格 = 上边原有的价格 + 变动的价格

            //变动的价格
            for (var i = 0; i < arr.length; i++) {
                if (arr[i]) {
                    var changeP = Number(arr[i].getAttribute('changePrice'));
                    // 字符串 转化 数值  Number()   Number.parseInt()  parseInt()
                    //4.3 最终的价格 = 上边原有的价格 + 变动的价格
                    price = price + changeP;
                }

            }

            //把最终的价格给元素添加上去
            pNode.innerHTML = price;


            //价格联动
            //第二个部分 (上边,左边，右边)

            //获取左边元素
            var leftN = document.querySelector('#wrap #content .conMain .goodsDetailWrap .rightDetail .chooseWrap .listWrap .left p')
            //左边价格 = 上边价格（赋值）
            leftN.innerHTML = '￥' + price;

            //右边价格 = 左边价格 + 中间选中的价格
            var rightN = document.querySelector('#wrap #content .conMain .goodsDetailWrap .rightDetail .chooseWrap .listWrap .right > i')
            var checkbox = document.querySelectorAll('#wrap #content .conMain .goodsDetailWrap .rightDetail .chooseWrap .listWrap .middle li input')

            for (var i = 0; i < checkbox.length; i++) {
                if (checkbox[i].checked) {
                    price = price + Number(checkbox[i].value);
                }
            }

            rightN.innerHTML = '￥' + price;

        }


        //放大镜右侧上半部数据动态渲染
        rightTopData();
        function rightTopData() {
            var rightTop = document.querySelector('#wrap #content .conMain .bigWrap .right .rightTop')

            //获取数据
            var goodsDetail = goodData.goodsDetail;

            var str = `
                    <h3>${goodsDetail.title}</h3>
                    <p>${goodsDetail.recommend}</p>
                    <div class="priceWrap">
                        <div class="priceTop">
                            <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                            <div class="price">
                                <span>￥</span>
                                <p>${goodsDetail.price}</p>
                                <i>降价通知</i>
                            </div>
                            <p>
                                <span>累计评价</span>
                                <span>${goodsDetail.evaluateNum}</span>
                            </p>
                        </div>
                        <div class="priceBottom">
                            <span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                            <p>
                                <span>${goodsDetail.promoteSales.type}</span>
                                <span>${goodsDetail.promoteSales.content}</span>
                            </p>
                        </div>
                    </div>
                    <div class="support">
                        <span>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</span>
                        <p>${goodsDetail.support}</p>
                    </div>
                    <div class="address">
                        <span>配&nbsp;送&nbsp;至</span>
                        <p>${goodsDetail.address}</p>
                    </div>
            `

            rightTop.innerHTML = str;
        }

        //缩略图数据动态渲染
        thumbnailData();
        function thumbnailData() {
            var ulNode = document.querySelector('#wrap #content .conMain .bigWrap .left .leftBttom .picsWrap ul')

            //获取数据
            var imagessrc = goodData.imagessrc;

            //遍历数组
            for (var i = 0; i < imagessrc.length; i++) {
                //创建 li
                var liNode = document.createElement('li');
                //创建 img
                var imgNode = document.createElement('img');
                imgNode.src = imagessrc[i].s;
                //把子元素追加到父元素上
                liNode.appendChild(imgNode);
                ulNode.appendChild(liNode)

            }

        }

        //缩略图的点击逻辑
        /*
        * 1.给 li 添加点击事件
        * 2.获取点击li的下标
        * 3.根据 下标 去数据中 那小图的路径，并且给小图设置上
        * 4.由于 大图 是动态创建的，所以不能直接去获取
        *   在全局定义一个 大图下标 ，只要点击 ，把大图下标做一个更新
        * 5.默认一上来 ，小图与缩略图第一张图片一致
        * */
        thumbnailClick();
        function thumbnailClick() {
            //获取 li 元素
            var liNodes = document.querySelectorAll('#wrap #content .conMain .bigWrap .left .leftBttom .picsWrap ul li')
            var smallPic = document.querySelector('#wrap #content .conMain .bigWrap .left .leftTop .smallPic img')

            //获取数据
            var imagessrc = goodData.imagessrc;

            //小图的默认图片与缩略图第一张图片一致
            smallPic.src = imagessrc[0].s;

            //li的下标 与 数据中 imagessrc 数组的下标 是 一一对应关系
            //给每一个 li 绑定点击事件
            for (var i = 0; i < liNodes.length; i++) {
                liNodes[i].abc = i;
                liNodes[i].onclick = function () {
                    //点击哪一个图片，小图就要换成哪一个图片，大图也要换成哪一个图片
                    // 怎么拿到点击这个 li 的下标
                    // console.log(this.index);
                    smallPic.src = imagessrc[this.abc].s;

                    //大图下标变化
                    bigImgIndex = this.abc;

                }
            }


        }

        //缩略图左右点击逻辑
        thumbnailLeftRightClick();
        function thumbnailLeftRightClick() {
            var prev = document.querySelector('#wrap #content .conMain .bigWrap .left .leftBttom a.prev')
            var next = document.querySelector('#wrap #content .conMain .bigWrap .left .leftBttom a.next')
            var ul = document.querySelector('#wrap #content .conMain .bigWrap .left .leftBttom .picsWrap ul')
            var liNodes = document.querySelectorAll('#wrap #content .conMain .bigWrap .left .leftBttom .picsWrap ul li')

            //每次走两张图片
            var everyLeft = (liNodes[0].offsetWidth + 20) * 2;

            //总距离 = ul的宽度 - div框的宽度 = （图片总数-图片显示数）*一个图片的宽度
            var sumLeft = (liNodes.length - 5) * (liNodes[0].offsetWidth + 20);

            //当前所走的位置
            var temp = 0;


            //点击 next ,ul往前走
            next.onclick = function () {
                temp += everyLeft;
                //范围限定
                if (temp > sumLeft) {
                    temp = sumLeft;
                }

                ul.style.left = -temp + 'px';
            }
            //点击 prev ,ul往后走
            prev.onclick = function () {
                temp -= everyLeft;
                //范围限定
                if (temp < 0) {
                    temp = 0;
                }
                ul.style.left = -temp + 'px';
            }

        }


        //放大镜的逻辑
        bigClassBind();
        function bigClassBind() {
            var leftTop = document.querySelector('#wrap #content .conMain .bigWrap .left .leftTop')
            //获取小图区域
            var smallPic = document.querySelector('#wrap #content .conMain .bigWrap .left .leftTop .smallPic')

            //获取数据
            var imagessrc = goodData.imagessrc;

            //鼠标移入事件
            smallPic.onmouseenter = function () {
                //创建蒙版区域
                var mask = document.createElement('div');
                mask.className = 'mask'
                smallPic.appendChild(mask);
                //创建大图区域
                var bigimgWrap = document.createElement('div')
                bigimgWrap.className = 'bigimgWrap'
                var bigImg = document.createElement('img')
                bigImg.src = imagessrc[bigImgIndex].b;
                bigimgWrap.appendChild(bigImg);
                leftTop.appendChild(bigimgWrap)

                //鼠标移动事件
                smallPic.onmousemove = function (event) {
                    //蒙版发生移动
                    //确定蒙版的 left top
                    //蒙版位置 = 鼠标的位置 - 小图距离屏幕左侧的距离 - 蒙版宽度的一半
                    var left = event.clientX - smallPic.getBoundingClientRect().left - mask.offsetWidth / 2;
                    var top = event.clientY - smallPic.getBoundingClientRect().top - mask.offsetHeight / 2;

                    //范围限定
                    if (left < 0) {
                        left = 0;
                    } else if (left > (smallPic.clientWidth - mask.offsetWidth)) {
                        left = smallPic.clientWidth - mask.offsetWidth;
                    }
                    if (top < 0) {
                        top = 0;
                    } else if (top > (smallPic.clientHeight - mask.offsetHeight)) {
                        top = smallPic.clientHeight - mask.offsetHeight;
                    }

                    mask.style.left = left + 'px';
                    mask.style.top = top + 'px';

                    //大图发生移动
                    //确定 bigImg 的left top
                    //移动比 = 蒙版的位置/大图的位置 = (小图的宽度-蒙版的宽度)/(大图片的宽度-大图框的宽度);
                    var scale = (smallPic.clientWidth - mask.offsetWidth) / (bigImg.offsetWidth - bigimgWrap.clientWidth)

                    bigImg.style.left = -left / scale + 'px';
                    bigImg.style.top = -top / scale + 'px';

                }
                //鼠标移出事件
                smallPic.onmouseleave = function () {
                    smallPic.onmousemove = smallPic.onmouseleave = null;
                    //清除 蒙版 区域
                    smallPic.removeChild(mask)
                    //清除 大图 区域
                    leftTop.removeChild(bigimgWrap)
                }
            }

        }


        //路径导航数据动态渲染
        navPathBind();
        function navPathBind() {
            var navPath = document.querySelector('#wrap #content .conMain .navPath')

            //获取数据
            var data = goodData.path;

            //遍历数组
            for (var i = 0; i < data.length; i++) {
                if (i === data.length - 1) {
                    //最后的区域
                    var aNode = document.createElement('a');
                    aNode.innerHTML = data[i].title;
                    navPath.appendChild(aNode)
                } else {
                    //创建 a 元素
                    var aNode = document.createElement('a');
                    aNode.href = data[i].url;
                    aNode.innerHTML = data[i].title;
                    navPath.appendChild(aNode)

                    //创建span 元素
                    var spanNode = document.createElement('span');
                    spanNode.innerHTML = '/';
                    navPath.appendChild(spanNode)
                }


            }

        }


    }</script>

</html>